<template>
  <div class="dashboard-home">
    <!-- 统计卡片 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <template #header>
            <div class="card-header">
              <span>总流程数</span>
            </div>
          </template>
          <div class="card-content">
            <h2>{{ wingknifeStats.total || 0 }}</h2>
            <div class="card-icon">
              <el-icon><Operation /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <template #header>
            <div class="card-header">
              <span>运行中流程</span>
            </div>
          </template>
          <div class="card-content">
            <h2>{{ wingknifeStats.running || 0 }}</h2>
            <div class="card-icon green">
              <el-icon><Loading /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <template #header>
            <div class="card-header">
              <span>数据清洗任务</span>
            </div>
          </template>
          <div class="card-content">
            <h2>{{ dataCleanStats.total || 0 }}</h2>
            <div class="card-icon blue">
              <el-icon><DataAnalysis /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <template #header>
            <div class="card-header">
              <span>配置项数量</span>
            </div>
          </template>
          <div class="card-content">
            <h2>{{ configStats.total || 0 }}</h2>
            <div class="card-icon orange">
              <el-icon><Setting /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 流程执行趋势 & 流程类型分布 -->
    <!-- <el-row :gutter="20" class="chart-row">
      <el-col :span="16">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>流程执行趋势</span>
              <el-radio-group v-model="timeRange" size="small">
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="chart-container">
            <div v-if="loading.trends" class="chart-loading">
              <el-icon class="loading-icon"><Loading /></el-icon>
              <span>数据加载中...</span>
            </div>
            <div v-else class="execution-trend">
              <div class="day-bar" v-for="(count, index) in executionTrends" :key="index">
                <div class="bar-value" :style="{ height: calculateBarHeight(count) }"></div>
                <div class="bar-label">{{ getDayLabel(index, timeRange) }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>热门流程</span>
            </div>
          </template>
          <div class="top-processes">
            <template v-if="wingknifeProcesses.length > 0">
              <div v-for="(process, index) in wingknifeProcesses.slice(0, 5)" :key="process.id" class="process-item">
                <div class="process-info">
                  <div class="process-name">{{ process.name }}</div>
                  <div class="process-stats">
                    <span>最近执行: {{ formatDate(process.last_run || '') }}</span>
                    <el-progress
                      :percentage="process.success_rate || 0"
                      :stroke-width="6"
                      :color="getSuccessRateColor(process.success_rate || 0)"
                    ></el-progress>
                  </div>
                </div>
                <div class="process-rank">{{ index + 1 }}</div>
              </div>
            </template>
            <div v-else class="no-data">暂无流程数据</div>
          </div>
        </el-card>
      </el-col>
    </el-row> -->

    <!-- 系统组件状态 -->
    <el-row :gutter="20" class="component-row">
      <el-col :span="12">
        <el-card class="component-card">
          <template #header>
            <div class="card-header">
              <span>最近数据清洗任务</span>
              <el-button
                type="primary"
                size="small"
                text
                @click="navigateToDataClean"
              >
                查看全部
              </el-button>
            </div>
          </template>
          <div v-if="loading.dataClean" class="loading-container">
            <el-icon class="loading-icon"><Loading /></el-icon>
          </div>
          <div v-else>
            <el-table :data="dataCleanTasks.slice(0, 4)" stripe style="width: 100%">
              <el-table-column prop="task_name" label="任务名称" min-width="150" show-overflow-tooltip />
              <el-table-column prop="status" label="状态" width="100">
                <template #default="{ row }">
                  <el-tag :type="getDataCleanStatusType(row.status)">
                    {{ getDataCleanStatusText(row.status) }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="created_at" label="创建时间" width="180">
                <template #default="{ row }">
                  {{ formatDate(row.created_at) }}
                </template>
              </el-table-column>
            </el-table>
            <div v-if="dataCleanTasks.length === 0" class="no-data">
              暂无数据清洗任务
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="component-card">
          <template #header>
            <div class="card-header">
              <span>配置管理</span>
              <el-button
                type="primary"
                size="small"
                text
                @click="navigateToConfig"
              >
                查看全部
              </el-button>
            </div>
          </template>
          <div class="config-summary">
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="config-item">
                  <div class="config-icon">
                    <el-icon><ShoppingBag /></el-icon>
                  </div>
                  <div class="config-info">
                    <div class="config-name">品牌</div>
                    <div class="config-value">{{ configStats.brands || 0 }}</div>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="config-item">
                  <div class="config-icon">
                    <el-icon><ShoppingCart /></el-icon>
                  </div>
                  <div class="config-info">
                    <div class="config-name">商品名称</div>
                    <div class="config-value">{{ configStats.productNames || 0 }}</div>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="config-item">
                  <div class="config-icon">
                    <el-icon><Promotion /></el-icon>
                  </div>
                  <div class="config-info">
                    <div class="config-name">营销词</div>
                    <div class="config-value">{{ configStats.marketingWords || 0 }}</div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="config-item">
                  <div class="config-icon">
                    <el-icon><ShoppingBag /> </el-icon>
                  </div>
                  <div class="config-info">
                    <div class="config-name">计量单位</div>
                    <div class="config-value">{{ configStats.units || 0 }}</div>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="config-item">
                  <div class="config-icon">
                    <el-icon><ShoppingBag /> </el-icon>
                  </div>
                  <div class="config-info">
                    <div class="config-name">系统配置</div>
                    <div class="config-value">{{ configStats.systemConfigs || 0 }}</div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最近执行记录 -->
    <el-card class="recent-executions" shadow="never">
      <template #header>
        <div class="card-header">
          <span>最近执行记录</span>
          <el-button
            type="primary"
            size="small"
            text
            @click="refreshData"
            :loading="loading.executions"
          >
            <el-icon><Refresh /></el-icon>刷新
          </el-button>
        </div>
      </template>
      <el-table :data="wingknifeExecutions" stripe style="width: 100%">
        <el-table-column prop="process.name" label="流程名称" min-width="180">
          <template #default="{ row }">
            {{ row.process?.name || '未知流程' }}
          </template>
        </el-table-column>
        <el-table-column prop="started_at" label="开始时间" width="180">
          <template #default="{ row }">
            {{ formatDate(row.started_at) }}
          </template>
        </el-table-column>
        <el-table-column prop="completed_at" label="结束时间" width="180">
          <template #default="{ row }">
            {{ row.completed_at ? formatDate(row.completed_at) : '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getExecutionStatusType(row.status)">
              {{ getExecutionStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" align="center">
          <template #default="{ row }">
            <el-button
              type="primary"
              size="small"
              text
              @click="navigateToExecutions(row.id)"
            >
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="wingknifeExecutions.length === 0" class="no-records">
        <el-empty description="暂无执行记录" />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import {
  Operation, Loading, DataAnalysis, Setting,
  Refresh, View, ShoppingBag, ShoppingCart, Promotion,
  Calendar, Timer
} from '@element-plus/icons-vue'
import {
  getWingknifeProcessList,
  getWingknifeExecutionList
} from '@/api/wingknife'
import { getDataCleanTasks } from '@/api/dataClean'
import {
  getBrandList,
  getProductNameList,
  getMarketingWordList
} from '@/api/config'
import request from '@/utils/request'

const router = useRouter()
const timeRange = ref('week')

// 加载状态
const loading = ref({
  stats: false,
  trends: false,
  processes: false,
  executions: false,
  dataClean: false,
  config: false,
  users: false
})

// 影刀流程数据
const wingknifeStats = ref({
  total: 0,
  running: 0,
  completed: 0,
  failed: 0
})

const wingknifeProcesses = ref([])
const wingknifeExecutions = ref([])
const executionTrends = ref([])

// 数据清洗数据
const dataCleanStats = ref({
  total: 0,
  completed: 0,
  pending: 0,
  failed: 0
})

const dataCleanTasks = ref([])

// 配置数据
const configStats = ref({
  total: 0,
  brands: 0,
  productNames: 0,
  marketingWords: 0,
  units: 0
})

// 用户活跃度数据
const activeUsers = ref({
  currentWeek: 0,
  lastWeek: 0,
  change: 0
})

// 获取影刀流程统计数据
const fetchWingknifeStats = async () => {
  try {
    loading.value.stats = true
    const response = await request({
      url: '/api/wingknife/stats',
      method: 'get'
    })

    // 直接使用接口返回的数据
    wingknifeStats.value = response || { total: 0, running: 0, completed: 0, failed: 0 }

    // 如果接口数据为空，尝试从流程列表计算统计数据
    if (!response || Object.keys(response).length === 0) {
      try {
        const processes = await getWingknifeProcessList()
        if (processes && processes.length > 0) {
          wingknifeStats.value.total = processes.length

          // 计算运行中流程数量
          let runningCount = 0
          let completedCount = 0
          let failedCount = 0

          processes.forEach(p => {
            if (p.status === 'running') runningCount++
            else if (p.status === 'completed') completedCount++
            else if (p.status === 'failed') failedCount++
          })

          wingknifeStats.value.running = runningCount
          wingknifeStats.value.completed = completedCount
          wingknifeStats.value.failed = failedCount
        }
      } catch (e) {
        console.error('获取流程列表计算统计数据失败:', e)
      }
    }

    loading.value.stats = false
  } catch (error) {
    console.error('获取影刀统计数据失败:', error)
    loading.value.stats = false

    // 错误时尝试使用流程列表来计算统计数据
    try {
      const processes = await getWingknifeProcessList()
      if (processes && processes.length > 0) {
        wingknifeStats.value.total = processes.length

        // 计算各状态流程数量
        let runningCount = 0
        let completedCount = 0
        let failedCount = 0

        processes.forEach(p => {
          if (p.status === 'running') runningCount++
          else if (p.status === 'completed') completedCount++
          else if (p.status === 'failed') failedCount++
        })

        wingknifeStats.value.running = runningCount
        wingknifeStats.value.completed = completedCount
        wingknifeStats.value.failed = failedCount
      }
    } catch (e) {
      console.error('获取流程列表失败:', e)
    }
  }
}

// 获取影刀流程列表
const fetchWingknifeProcesses = async () => {
  try {
    loading.value.processes = true
    const response = await getWingknifeProcessList()
    wingknifeProcesses.value = response || []
    loading.value.processes = false
  } catch (error) {
    console.error('获取影刀流程列表失败:', error)
    loading.value.processes = false
  }
}

// 获取影刀执行记录
const fetchWingknifeExecutions = async () => {
  try {
    loading.value.executions = true
    const response = await getWingknifeExecutionList({ limit: 10 })
    // 处理响应数据结构
    if (response && response.items) {
      wingknifeExecutions.value = response.items || []
    } else {
      wingknifeExecutions.value = response || []
    }
    loading.value.executions = false
  } catch (error) {
    console.error('获取影刀执行记录失败:', error)
    loading.value.executions = false
    wingknifeExecutions.value = []
  }
}

// 获取执行趋势数据
const fetchExecutionTrends = async () => {
  try {
    loading.value.trends = true
    // 尝试从API获取趋势数据
    let response = null;
    try {
      response = await request({
        url: '/api/wingknife/execution-trends',
        method: 'get',
        params: { range: timeRange.value }
      })
    } catch (err) {
      console.log('执行趋势API请求失败，使用模拟数据', err)
      response = null;
    }

    if (response) {
      executionTrends.value = response
    } else {
      // 如果API不存在或返回错误，生成模拟数据
      const days = timeRange.value === 'week' ? 7 : 30
      executionTrends.value = Array.from({ length: days }, () => Math.floor(Math.random() * 20 + 5))
    }
    loading.value.trends = false
  } catch (error) {
    console.error('获取执行趋势数据失败:', error)
    loading.value.trends = false
    // 生成模拟数据
    const days = timeRange.value === 'week' ? 7 : 30
    executionTrends.value = Array.from({ length: days }, () => Math.floor(Math.random() * 20 + 5))
  }
}

// 获取数据清洗任务统计
const fetchDataCleanStats = async () => {
  try {
    loading.value.dataClean = true
    // 直接从API获取数据清理统计数据
    const response = await request({
      url: '/api/data-clean/stats',
      method: 'get'
    })

    // 使用接口返回的真实数据
    if (response && response.status_distribution) {
      dataCleanStats.value = {
        total: response.total || 0,
        completed: response.status_distribution.completed || 0,
        pending: response.status_distribution.pending || 0,
        failed: response.status_distribution.failed || 0
      }
    } else {
      dataCleanStats.value = { total: 0, completed: 0, pending: 0, failed: 0 }

      // 如果统计接口不可用，尝试从任务列表计算统计数据
      try {
        const tasks = await request({
          url: '/api/data-clean/tasks',
          method: 'get'
        })

        if (tasks && tasks.length > 0) {
          dataCleanStats.value.total = tasks.length

          // 计算各状态任务数量
          let completedCount = 0
          let pendingCount = 0
          let failedCount = 0

          tasks.forEach(task => {
            if (task.status === 'completed') completedCount++
            else if (task.status === 'pending') pendingCount++
            else if (task.status === 'failed') failedCount++
          })

          dataCleanStats.value.completed = completedCount
          dataCleanStats.value.pending = pendingCount
          dataCleanStats.value.failed = failedCount
        }
      } catch (e) {
        console.error('获取任务列表计算统计数据失败:', e)
      }
    }

    loading.value.dataClean = false
  } catch (error) {
    console.error('获取数据清理统计失败:', error)
    loading.value.dataClean = false
  }
}

// 获取数据清洗任务
const fetchDataCleanTasks = async () => {
  try {
    loading.value.dataClean = true
    // 直接从API获取数据清洗任务列表
    const response = await request({
      url: '/api/data-clean/tasks',
      method: 'get',
      params: { limit: 5 }
    })

    // 使用接口返回的真实数据
    if (response && response.length > 0) {
      dataCleanTasks.value = response.slice(0, 5)
    } else {
      // 尝试从统计接口获取最近完成的任务
      try {
        const statsResponse = await request({
          url: '/api/data-clean/stats',
          method: 'get'
        })

        if (statsResponse && statsResponse.recent_completed_tasks &&
            statsResponse.recent_completed_tasks.length > 0) {
          dataCleanTasks.value = statsResponse.recent_completed_tasks
        } else {
          dataCleanTasks.value = []
        }
      } catch (e) {
        console.error('获取最近完成任务失败:', e)
        dataCleanTasks.value = []
      }
    }

    loading.value.dataClean = false
  } catch (error) {
    console.error('获取数据清洗任务失败:', error)
    loading.value.dataClean = false
    dataCleanTasks.value = []
  }
}

// 获取配置统计
const fetchConfigStats = async () => {
  try {
    loading.value.config = true

    // 从统计API获取各类配置数据
    const response = await request({
      url: '/api/config/stats',
      method: 'get'
    });

    // 使用API返回的真实统计数据
    if (response && Object.keys(response).length > 0) {
      configStats.value = response;
    } else {
      // 如果API返回空结果，尝试从各配置接口获取数据并计算
      let brands = [], productNames = [], marketingWords = [], units = [], systemConfigs = [];

      try {
        [brands, productNames, marketingWords, units] = await Promise.all([
          getBrandList(),
          getProductNameList(),
          getMarketingWordList(),
          request({ url: '/api/config/units', method: 'get' }),
          request({ url: '/api/config/system', method: 'get' })
        ]);

        // 设置配置统计数据
        configStats.value.brands = Array.isArray(brands) ? brands.length : 0;
        configStats.value.productNames = Array.isArray(productNames) ? productNames.length : 0;
        configStats.value.marketingWords = Array.isArray(marketingWords) ? marketingWords.length : 0;
        configStats.value.units = Array.isArray(units) ? units.length : 0;
        configStats.value.systemConfigs = Array.isArray(systemConfigs) ? systemConfigs.length : 0;
        configStats.value.total =
          configStats.value.brands +
          configStats.value.productNames +
          configStats.value.marketingWords +
          configStats.value.units +
          configStats.value.systemConfigs;
      } catch (err) {
        console.error('获取配置列表数据失败，使用默认值', err);
      }
    }

    loading.value.config = false;
  } catch (error) {
    console.error('获取配置统计失败:', error);
    loading.value.config = false;
  }
}

// 获取用户活跃度数据
const fetchActiveUsers = async () => {
  try {
    loading.value.users = true
    // 尝试从API获取用户活跃度数据
    let response = null;
    try {
      response = await request({
        url: '/api/wingknife/active-users',
        method: 'get'
      })
    } catch (err) {
      console.log('用户活跃度API不存在，使用模拟数据')
      response = null;
    }

    if (response) {
      activeUsers.value = response
    } else {
      // 如果API不存在，生成模拟数据
      activeUsers.value = {
        currentWeek: Math.floor(Math.random() * 100),
        lastWeek: Math.floor(Math.random() * 100),
        change: Math.floor(Math.random() * 20) - 10
      }
    }
    loading.value.users = false
  } catch (error) {
    console.error('获取用户活跃度数据失败:', error)
    loading.value.users = false
    // 生成模拟数据
    activeUsers.value = {
      currentWeek: Math.floor(Math.random() * 100),
      lastWeek: Math.floor(Math.random() * 100),
      change: Math.floor(Math.random() * 20) - 10
    }
  }
}

// 刷新所有数据
const refreshData = async () => {
  Promise.all([
    fetchWingknifeStats(),
    fetchWingknifeProcesses(),
    fetchWingknifeExecutions(),
    fetchExecutionTrends(),
    fetchDataCleanStats(),
    fetchDataCleanTasks(),
    fetchConfigStats(),
    // fetchActiveUsers()
  ])
  ElMessage.success('数据已刷新')
}

// 跳转到执行记录页面
const navigateToExecutions = (id) => {
  if (id) {
    router.push(`/wingknife/executions?id=${id}`)
  } else {
    router.push('/wingknife/executions')
  }
}

// 跳转到数据清洗页面
const navigateToDataClean = () => {
  router.push('/data-clean')
}

// 跳转到配置管理页面
const navigateToConfig = () => {
  router.push('/config/brands')
}

// 日期格式化
const formatDate = (dateString) => {
  if (!dateString) return '-'
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 计算柱状图高度
const calculateBarHeight = (count) => {
  const maxCount = Math.max(...executionTrends.value, 1)
  return `${(count / maxCount * 100).toFixed(0)}%`
}

// 获取日期标签
const getDayLabel = (index, range) => {
  if (range === 'week') {
    const days = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    return days[index]
  } else {
    return (index + 1).toString()
  }
}

// 获取成功率颜色
const getSuccessRateColor = (rate) => {
  if (rate >= 90) return '#67c23a'
  if (rate >= 70) return '#e6a23c'
  return '#f56c6c'
}

// 获取执行状态类型
const getExecutionStatusType = (status) => {
  switch (status) {
    case 'completed': return 'success'
    case 'running': return 'primary'
    case 'pending': return 'info'
    case 'failed': return 'danger'
    default: return 'info'
  }
}

// 获取执行状态文本
const getExecutionStatusText = (status) => {
  switch (status) {
    case 'completed': return '完成'
    case 'running': return '运行中'
    case 'pending': return '等待中'
    case 'failed': return '失败'
    default: return '未知'
  }
}

// 获取数据清洗状态类型
const getDataCleanStatusType = (status) => {
  switch (status) {
    case 'completed': return 'success'
    case 'processing': return 'primary'
    case 'pending': return 'info'
    case 'failed': return 'danger'
    default: return 'info'
  }
}

// 获取数据清洗状态文本
const getDataCleanStatusText = (status) => {
  switch (status) {
    case 'completed': return '已完成'
    case 'processing': return '处理中'
    case 'pending': return '待处理'
    case 'failed': return '失败'
    default: return '未知'
  }
}

// 监听时间范围变化
watch(timeRange, () => {
  fetchExecutionTrends()
})

onMounted(async () => {
  await Promise.all([
    fetchWingknifeStats(),
    fetchWingknifeProcesses(),
    fetchWingknifeExecutions(),
    fetchExecutionTrends(),
    fetchDataCleanStats(),
    fetchDataCleanTasks(),
    fetchConfigStats(),
    // fetchActiveUsers()
  ])
})
</script>

<style lang="scss" scoped>
.dashboard-home {
  .stat-card {
    margin-bottom: 20px;
    border-radius: 8px;
    transition: all 0.3s;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 600;
    }

    .card-content {
      position: relative;
      text-align: center;
      padding: 20px 0;

      h2 {
        margin: 0;
        font-size: 32px;
        color: #303133;
        font-weight: 700;
      }

      .card-icon {
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background-color: rgba(64, 158, 255, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #409EFF;

        .el-icon {
          font-size: 24px;
        }

        &.green {
          background-color: rgba(103, 194, 58, 0.1);
          color: #67c23a;
        }

        &.blue {
          background-color: rgba(64, 158, 255, 0.1);
          color: #409EFF;
        }

        &.orange {
          background-color: rgba(230, 162, 60, 0.1);
          color: #e6a23c;
        }
      }
    }
  }

  .chart-row, .component-row {
    margin-top: 20px;
  }

  .chart-card, .component-card {
    height: 350px;

    .chart-container {
      height: 280px;
      position: relative;
    }

    .chart-loading, .loading-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: rgba(255, 255, 255, 0.8);

      .loading-icon {
        font-size: 32px;
        color: #409EFF;
        animation: rotate 2s linear infinite;
      }
    }
  }

  .loading-container {
    min-height: 100px;
  }

  .recent-executions {
    margin-top: 20px;

    .no-records {
      padding: 20px 0;
    }
  }

  .execution-trend {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 100%;
    padding: 20px 0;

    .day-bar {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 40px;
      height: 100%;

      .bar-value {
        width: 100%;
        max-width: 40px;
        background-color: #409EFF;
        border-radius: 4px 4px 0 0;
        transition: height 0.3s ease;
      }

      .bar-label {
        margin-top: 8px;
        font-size: 12px;
        color: #606266;
      }
    }
  }

  .top-processes {
    height: 280px;
    overflow-y: auto;
    padding: 10px 0;

    .process-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
      padding: 12px 16px;
      margin-bottom: 10px;
      border-radius: 4px;
      background-color: #f8f9fa;
      transition: all 0.2s;
      
      &:hover {
        background-color: #ecf5ff;
      }
      
      .process-info {
        flex: 1;
        
        .process-name {
          font-weight: 600;
          margin-bottom: 8px;
        }
        
        .process-stats {
          display: flex;
          flex-direction: column;
          font-size: 12px;
          color: #606266;
          
          .el-progress {
            margin-top: 5px;
            width: 90%;
          }
        }
      }
      
      .process-rank {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background-color: #409EFF;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
      }
    }
  }
  
  .config-summary {
    padding: 20px 0;
    
    .config-item {
      display: flex;
      align-items: center;
      padding: 15px;
      background-color: #f8f9fa;
      border-radius: 6px;
      transition: all 0.2s;
      
      &:hover {
        background-color: #ecf5ff;
      }
      
      .config-icon {
        width: 48px;
        height: 48px;
        border-radius: 8px;
        background-color: #409EFF;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        
        .el-icon {
          font-size: 24px;
        }
      }
      
      .config-info {
        .config-name {
          font-weight: 600;
          margin-bottom: 5px;
        }
        
        .config-value {
          font-size: 20px;
          font-weight: 700;
          color: #303133;
        }
      }
    }
  }
  
  .no-data {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    color: #909399;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style> 